<!--数据字典-->
<template>
  <div class="dictionary">
    <a-card size="small" :headStyle="{ background: '#f9f9f9' }" :bodyStyle="{ height: 'calc(100% - 48px)' }">
      <div slot="title">
        <div class="top-icon">
          <icon-font type="icon-shujuzidian" />
        </div>
        <span>数据字典</span>
      </div>
      <div slot="extra">
        <a-button type="primary" icon="plus" @click="dictionaryClick('add')">新增字典</a-button>
      </div>
      <el-table
        :data="dictionaryConfig.tableData"
        highlight-current-row
        border
        :row-key="getRowKeys"
        :expand-row-keys="expands"
        @expand-change="expandSelect"
        height="100%"
        :row-style="{height:'40px'}"
        :cell-style="{padding:'0px'}"
        :header-cell-style="{background: '#FAFAFA', padding: 0, height: '40px' ,color: '#666666'}"
        style="width: 100%">
        <el-table-column type="expand">
          <div class="tree-expand">
            <a-button-group>
              <a-tooltip placement="bottom">
                <template slot="title">
                  <span>一级新增</span>
                </template>
                <a-button icon="plus" :disabled="Btns.addState" @click="clickButton('add')"></a-button>
              </a-tooltip>
              <a-tooltip placement="bottom">
                <template slot="title">
                  <span>子级新增</span>
                </template>
                <a-button icon="plus" :disabled="Btns.addChildSatate" @click="clickButton('addChild')"></a-button>
              </a-tooltip>
              <a-tooltip placement="bottom">
                <template slot="title">
                  <span>修改</span>
                </template>
                <a-button icon="edit" :disabled="Btns.editState" @click="clickButton('edit')"></a-button>
              </a-tooltip>
              <a-tooltip placement="bottom">
                <template slot="title">
                  <span>删除</span>
                </template>
                <a-button icon="delete" :disabled="Btns.delState" @click="clickButton('del')"></a-button>
              </a-tooltip>
            </a-button-group>
            <a-tree
              show-line
              :treeData="treeData"
              defaultExpandAll
              @select="onSelect">
            </a-tree>
          </div>
        </el-table-column>
        <slot v-for="(item,index) in dictionaryConfig.columns">
          <el-table-column
            :key="index"
            :property="item.field"
            :label="item.title"
            :width="item.width"
            show-overflow-tooltip
            sortable>
          </el-table-column>
        </slot>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <a @click="dictionaryClick('edit', scope.row)">编辑</a>
            <a-divider type="vertical" />
            <a @click="dictionaryClick('del', scope.row)">删除</a>
          </template>
        </el-table-column>
      </el-table>
    </a-card>

    <!-- 数据字典弹出框 -->
    <a-modal
      :maskClosable="false"
      :title="dictionaryConfig.modalTitle"
      v-model="dictionaryConfig.modalVisible"
      @ok="dictionaryOk">
      <a-form
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 16 }"
        :form="form1">
        <a-form-item label="字典代号">
          <a-input v-decorator="[ 'DD_Code', {rules: [{ required: true, message: '请输入字典代号' }]} ]" />
        </a-form-item>
        <a-form-item label="字典名称">
          <a-input v-decorator="[ 'DD_Name', {rules: [{ required: true, message: '请输入字典名称' }]} ]" />
        </a-form-item>
        <a-form-item label="顺序号">
          <a-input type="number" v-decorator="[ 'DD_Order' ]" />
        </a-form-item>
        <a-form-item label="字典备注">
          <a-input type="textarea" v-decorator="[ 'DD_Remark' ]" />
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 数据字典详情弹出框 -->
    <a-modal
      :maskClosable="false"
      :title="detailConfig.modalTitle"
      v-model="detailConfig.modalVisible"
      @ok="detailOk">
      <a-form
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 16 }"
        :form="form2">
        <a-form-item label="字典代号">
          <a-input v-decorator="[ 'DDL_Code', {rules: [{ required: true, message: '请输入字典代号' }]} ]" />
        </a-form-item>
        <a-form-item label="字典名称">
          <a-input v-decorator="[ 'DDL_Value', {rules: [{ required: true, message: '请输入字典名称' }]} ]" />
        </a-form-item>
        <a-form-item label="顺序号">
          <a-input type="number" v-decorator="[ 'DDL_Order' ]" />
        </a-form-item>
        <a-form-item label="字典备注">
          <a-input type="textarea" v-decorator="[ 'DDL_Remark' ]" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import pick from 'lodash.pick'
export default {
  name: 'Dictionary',
  components: {
  },
  data () {
    return {
      dictionaryConfig: {
        tableData: [],
        columns: [{
          title: '顺序号',
          field: 'DD_Order'
        }, {
          title: '字典代号',
          field: 'DD_Code'
        }, {
          title: '字典名称',
          field: 'DD_Name'
        }, {
          title: '字典备注',
          field: 'DD_Remark'
        }],
        modalTitle: '',
        modalVisible: false
      },
      form1: this.$form.createForm(this),
      form2: this.$form.createForm(this),
      detailConfig: {
        modalTitle: '',
        modalVisible: false
      },
      expands: [], // 主表格要展开的行，数值的元素是row的key值
      Btns: { // 字典详情按钮禁用状态
        addState: true,
        addChildSatate: true,
        editState: true,
        delState: true
      },
      treeData: [], // 字典详情数据
      showDetail: {} // 选中字典详情树节点时的数据
    }
  },
  created () {
    this.getDictionaryData()
  },
  mounted () {
  },
  methods: {
    // 获取row的key值
    getRowKeys (row) {
      return row.DD_ID
    },
    // 字典表格每次只能展开一行
    expandSelect (row, expandedRows) {
      this.expands = []
      if (expandedRows.length > 0) {
        this.expands.push(row.DD_ID)
        this.getDetailData(row.DD_ID) // 获取字典详情表数据
        this.Btns = { // 字典详情按钮禁用状态
          addState: false,
          addChildSatate: true,
          editState: true,
          delState: true
        }
      } else {
        this.expands = []
      }
    },
    // 获取数据字典主表数据
    getDictionaryData () {
      const param = { order: [{ Order: 1, Param: 'DD_Order' }] }
      this.$vueAjax.get('Sys_Base_DataDictionary/get', param).then(res => {
        this.dictionaryConfig.tableData = res.List
      })
    },
    // 点击字典表获取字典详情数据
    getDetailData (DD_ID) {
      this.treeData = []
      const param = { searchList: [{ DD_ID }], flag: 2, order: [{ Order: 1, Param: 'DDL_Order' }] }
      this.$vueAjax.get('Sys_Base_DDL/get', param).then(res => {
        this.treeData = this.convertToTreeData(res.List, null)
      })
    },
    onSelect (selectedKeys, info) {
      this.showDetail = info.node.dataRef
      this.Btns = {
        addState: false,
        addChildSatate: false,
        editState: false,
        delState: false
      }
    },
    // 字典主表按钮事件，val代表类型，add：字典新增，edit：字典编辑，del：字典删除
    dictionaryClick (val, row) {
      switch (val) {
        case 'add':
          this.dictionaryConfig.modalTitle = '字典新增'
          this.dictionaryConfig.modalVisible = true
          this.form1.resetFields() // 表单清空
          break
        case 'edit':
          this.dictionaryConfig.modalTitle = '字典编辑'
          this.dictionaryConfig.modalVisible = true
          this.$nextTick(() => { // 表单赋值
            this.form1.setFieldsValue(pick(row, ['DD_Order', 'DD_Code', 'DD_Name', 'DD_Remark']))
          })
          break
        case 'del':
          var this_ = this
          this.$confirm({
            title: '提示',
            content: '此操作将永久删除该文件, 是否继续?',
            okText: '确认',
            cancelText: '取消',
            onOk () {
              this_.$message.success('删除成功')
            }
          })
          break
        default:
          break
      }
    },
    // 字典详情按钮事件，val代表类型，add：一级新增，addChild：子级新增，edit：修改，del：删除
    clickButton (val) {
      switch (val) {
        case 'add':
          this.detailConfig.modalTitle = '一级新增'
          this.detailConfig.modalVisible = true
          this.form2.resetFields() // 表单清空
          break
        case 'addChild':
          this.detailConfig.modalTitle = '子级新增'
          this.detailConfig.modalVisible = true
          this.form2.resetFields() // 表单清空
          break
        case 'edit':
          this.detailConfig.modalTitle = '编辑'
          this.detailConfig.modalVisible = true
          this.$nextTick(() => { // 表单赋值
            this.form2.setFieldsValue(pick(this.showDetail, ['DDL_Order', 'DDL_Code', 'DDL_Value', 'DDL_Remark']))
          })
          break
        case 'del':
          var this_ = this
          this.$confirm({
            title: '提示',
            content: '此操作将永久删除该文件, 是否继续?',
            okText: '确认',
            cancelText: '取消',
            onOk () {
              this_.$message.success('删除成功')
            }
          })
          break
        default:
          break
      }
    },
    // 字典主表表单提交事件
    dictionaryOk () {},
    // 字典详情表单提交事件
    detailOk () {},
    /**
     * @名字: 将平级ID和pid转换成tree型结构
     * @详情: 递归函数
     * @参数: data表示数组，pid表示父级节点
     * @返回值: Object 如｛title："显示名字",key:"id值"｝
     */
    convertToTreeData (data, pid) {
      const result = []
      let temp = []
      for (let i = 0; i < data.length; i++) {
        if (data[i].DDL_FatherID === pid) {
          const obj = { ...data[i], title: `${data[i].DDL_Code} ${data[i].DDL_Value}`, key: `${data[i].DDL_ID}` }
          temp = this.convertToTreeData(data, data[i].DDL_ID)
          if (temp.length > 0) {
            obj.children = temp
          }
          result.push(obj)
        }
      }
      return result
    }
  }
}
</script>

<style lang="less" scoped>
.dictionary {
  width: 100%;
  height: 100%;
  padding: 10px 10px 0;
  background: #f0f2f5;
  .ant-card {
    /deep/ .ant-card-body {
      td {
        padding: 0;
        .tree-expand {
          padding: 10px;
          .ant-btn {
            font-size: 16px;
          }
        }
      }
    }
  }
}
</style>
